<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>m.dot | A Pelican Blog</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i" />
  <link rel="stylesheet" href="static/m-dark.css" />
  <link rel="canonical" href="page.html" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<header><nav id="navigation">
  <div class="m-container">
    <div class="m-row">
      <a href="./" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">A Pelican Blog</a>
    </div>
  </div>
</nav></header>
<main>
<article>
  <div class="m-container m-container-inflatable">
    <div class="m-row">
      <div class="m-col-l-10 m-push-l-1">
        <h1>m.dot</h1>
<!-- content -->
<p>Note: the test uses DejaVu Sans instead of Source Sans Pro in order to have
predictable rendering on the CIs.</p>
<p>Different shapes, fills etc. All default colors, filled only the first node
and the arrowheads, nothing else. Non-default font size should be preserved.</p>
<div class="m-graph">
<svg style="width: 16.250rem; height: 5.312rem;" viewBox="0.00 0.00 259.77 84.77">
<g transform="scale(1 1) rotate(0) translate(4 80.7696)">
<title>Basics</title>
<g class="m-node">
<title>a</title>
<polygon points="54,-40.3848 0,-40.3848 0,-4.3848 54,-4.3848 54,-40.3848"/>
<text text-anchor="middle" x="27" y="-18.5848">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="113.3848" cy="-22.3848" rx="18.2906" ry="18.2906"/>
<ellipse cx="113.3848" cy="-22.3848" rx="22.2701" ry="22.2701"/>
<text text-anchor="middle" x="113.3848" y="-18.5848">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M54.3327,-22.3848C62.6964,-22.3848 71.9814,-22.3848 80.6653,-22.3848"/>
<polygon points="80.8574,-25.8849 90.8574,-22.3848 80.8574,-18.8849 80.8574,-25.8849"/>
</g>
<g class="m-node m-flat">
<title>c</title>
<ellipse cx="224.7696" cy="-22.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="224.7696" y="-18.5848">c</text>
</g>
<g class="m-edge">
<title>b&#45;&gt;c</title>
<path d="M135.9251,-22.3848C150.665,-22.3848 170.2762,-22.3848 187.3232,-22.3848"/>
<polygon points="187.5396,-25.8849 197.5396,-22.3848 187.5396,-18.8849 187.5396,-25.8849"/>
<text text-anchor="middle" x="166.7696" y="-34.3848" style="font-size: 40.0px;">0</text>
</g>
<g class="m-edge">
<title>c&#45;&gt;c</title>
<path d="M214.4919,-39.6042C212.3945,-49.5298 215.8203,-58.7696 224.7696,-58.7696 230.5026,-58.7696 233.969,-54.9775 235.1685,-49.6425"/>
<polygon points="238.6679,-49.5611 235.0472,-39.6042 231.6684,-49.6458 238.6679,-49.5611"/>
<text text-anchor="middle" x="224.7696" y="-63.9696">1</text>
</g>
</g>
</svg>
</div>
<div class="m-graph">
<svg style="width: 5.562rem; height: 2.750rem;" viewBox="0.00 0.00 89.00 44.00">
<g transform="scale(1 1) rotate(0) translate(4 40)">
<title>More shapes</title>
<g class="m-node m-flat">
<title>d</title>
<text text-anchor="middle" x="40.5" y="-14.2">outsider</text>
</g>
</g>
</svg>
</div>
<p>Colors:</p>
<div class="m-graph">
<svg style="width: 5.688rem; height: 8.500rem;" viewBox="0.00 0.00 91.38 135.54">
<g transform="scale(1 1) rotate(0) translate(4 131.5391)">
<title>Colors</title>
<g class="m-node m-success m-flat">
<title>a</title>
<ellipse cx="27" cy="-109.1543" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-105.3543">a</text>
</g>
<g class="m-node m-dim">
<title>b</title>
<ellipse cx="27" cy="-18.3848" rx="18.2703" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-14.5848">b</text>
</g>
<g class="m-edge m-warning">
<title>a&#45;&gt;b</title>
<path d="M27,-90.3468C27,-77.8501 27,-61.2025 27,-47.0671"/>
<polygon points="30.5001,-46.8576 27,-36.8576 23.5001,-46.8577 30.5001,-46.8576"/>
<text text-anchor="middle" x="41" y="-59.9696">yes</text>
</g>
<g class="m-edge m-primary">
<title>b&#45;&gt;b</title>
<path d="M43.8422,-26.1192C53.9096,-27.8379 63.3848,-25.2598 63.3848,-18.3848 63.3848,-13.9805 59.4961,-11.3396 54.0544,-10.4622"/>
<polygon points="53.776,-6.9666 43.8422,-10.6504 53.905,-13.9655 53.776,-6.9666"/>
<text text-anchor="middle" x="73.3848" y="-14.5848">no</text>
</g>
</g>
</svg>
</div>
<p>Unoriented graph without a title:</p>
<div class="m-graph m-success">
<svg style="width: 3.875rem; height: 7.375rem;" viewBox="0.00 0.00 62.00 117.54">
<g transform="scale(1 1) rotate(0) translate(4 113.5391)">
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-91.1543" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-87.3543">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-18.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-14.5848">b</text>
</g>
<g class="m-edge">
<title>a&#45;&#45;b</title>
<path d="M21.0843,-73.1663C19.9734,-61.9709 19.9719,-47.622 21.0798,-36.418"/>
</g>
<g class="m-edge">
<title>a&#45;&#45;b</title>
<path d="M32.9157,-73.1663C34.0266,-61.9709 34.0281,-47.622 32.9202,-36.418"/>
</g>
</g>
</svg>
</div>
<p>Strict graphs:</p>
<div class="m-graph">
<svg style="width: 3.875rem; height: 7.375rem;" viewBox="0.00 0.00 62.00 117.54">
<g transform="scale(1 1) rotate(0) translate(4 113.5391)">
<title>A to B</title>
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-91.1543" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-87.3543">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-18.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-14.5848">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M27,-72.4144C27,-64.6303 27,-55.4246 27,-46.8383"/>
<polygon points="30.5001,-46.8093 27,-36.8093 23.5001,-46.8094 30.5001,-46.8093"/>
</g>
</g>
</svg>
</div>
<div class="m-graph">
<svg style="width: 3.875rem; height: 7.375rem;" viewBox="0.00 0.00 62.00 117.54">
<g transform="scale(1 1) rotate(0) translate(4 113.5391)">
<title>A to B</title>
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-91.1543" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-87.3543">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-18.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-14.5848">b</text>
</g>
<g class="m-edge">
<title>a&#45;&#45;b</title>
<path d="M27,-72.4144C27,-61.4654 27,-47.7036 27,-36.8093"/>
</g>
</g>
</svg>
</div>
<p>Structs:</p>
<div class="m-graph">
<svg style="width: 13.000rem; height: 5.438rem;" viewBox="0.00 0.00 208.00 87.00">
<g transform="scale(1 1) rotate(0) translate(4 83)">
<title>Structs</title>
<g class="m-node m-info m-flat">
<title>struct</title>
<polygon points="0,-.5 0,-78.5 78,-78.5 78,-.5 0,-.5"/>
<text text-anchor="middle" x="39" y="-61.7">a</text>
<polyline points="0,-52.5 78,-52.5 "/>
<text text-anchor="middle" x="39" y="-35.7">b</text>
<polyline points="0,-26.5 78,-26.5 "/>
<text text-anchor="middle" x="13" y="-9.7">c</text>
<polyline points="26,-.5 26,-26.5 "/>
<text text-anchor="middle" x="39" y="-9.7">d</text>
<polyline points="52,-.5 52,-26.5 "/>
<text text-anchor="middle" x="65" y="-9.7">e</text>
</g>
<g class="m-node m-flat">
<title>another</title>
<polygon points="96,-13.5 96,-65.5 200,-65.5 200,-13.5 96,-13.5"/>
<text text-anchor="middle" x="109" y="-35.7">a</text>
<polyline points="122,-13.5 122,-65.5 "/>
<text text-anchor="middle" x="135" y="-48.7">b</text>
<polyline points="122,-39.5 148,-39.5 "/>
<text text-anchor="middle" x="135" y="-22.7">c</text>
<polyline points="148,-13.5 148,-65.5 "/>
<text text-anchor="middle" x="161" y="-35.7">d</text>
<polyline points="174,-13.5 174,-65.5 "/>
<text text-anchor="middle" x="187" y="-35.7">e</text>
</g>
</g>
</svg>
</div>
<figure class="m-figure">
<svg class="m-graph m-info" style="width: 3.875rem; height: 7.375rem;" viewBox="0.00 0.00 62.00 117.54">
<g transform="scale(1 1) rotate(0) translate(4 113.5391)">
<title>A to B</title>
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-91.1543" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-87.3543">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-18.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-14.5848">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M27,-72.4144C27,-64.6303 27,-55.4246 27,-46.8383"/>
<polygon points="30.5001,-46.8093 27,-36.8093 23.5001,-46.8094 30.5001,-46.8093"/>
</g>
</g>
</svg>
<figcaption>This is a title.<div class="m-figure-description">
<p>This is a description.</p>
</div>
</figcaption>
</figure>
<figure class="m-figure">
<svg class="m-graph" style="width: 3.875rem; height: 7.375rem;" viewBox="0.00 0.00 62.00 117.54">
<g transform="scale(1 1) rotate(0) translate(4 113.5391)">
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-91.1543" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-87.3543">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-18.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-14.5848">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M27,-72.4144C27,-64.6303 27,-55.4246 27,-46.8383"/>
<polygon points="30.5001,-46.8093 27,-36.8093 23.5001,-46.8094 30.5001,-46.8093"/>
</g>
</g>
</svg>
<p>The graph below should not be styled as a part of the figure:</p>
<div class="m-graph m-danger">
<svg style="width: 3.875rem; height: 7.375rem;" viewBox="0.00 0.00 62.00 117.54">
<g transform="scale(1 1) rotate(0) translate(4 113.5391)">
<title>A to B</title>
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-91.1543" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-87.3543">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-18.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-14.5848">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M27,-72.4144C27,-64.6303 27,-55.4246 27,-46.8383"/>
<polygon points="30.5001,-46.8093 27,-36.8093 23.5001,-46.8094 30.5001,-46.8093"/>
</g>
</g>
</svg>
</div>
</figure>
<p>Subgraphs:</p>
<div class="m-graph">
<svg style="width: 10.875rem; height: 17.625rem;" viewBox="0.00 0.00 174.00 282.31">
<g transform="scale(1 1) rotate(0) translate(4 278.3087)">
<g class="m-cluster">
<title>cluster_Outer</title>
<polygon points="8,-8 8,-266.3087 158,-266.3087 158,-8 8,-8"/>
<text text-anchor="middle" x="83" y="-249.5087">Outer</text>
</g>
<g class="m-cluster m-info">
<title>cluster_Inner</title>
<polygon points="80,-80.7696 80,-232.3087 150,-232.3087 150,-80.7696 80,-80.7696"/>
<text text-anchor="middle" x="115" y="-215.5087">Inner</text>
</g>
<g class="m-node m-flat">
<title>A</title>
<ellipse cx="43" cy="-179.9239" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="43" y="-176.1239">A</text>
</g>
<g class="m-node m-flat">
<title>B</title>
<ellipse cx="115" cy="-107.1543" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="115" y="-103.3543">B</text>
</g>
<g class="m-edge">
<title>A&#45;&gt;B</title>
<path d="M58.2693,-164.4913C68.197,-154.4576 81.3153,-141.1991 92.4363,-129.9592"/>
<polygon points="95.2073,-132.1349 99.7527,-122.5646 90.2312,-127.2115 95.2073,-132.1349"/>
</g>
<g class="m-node m-flat">
<title>C</title>
<ellipse cx="43" cy="-107.1543" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="43" y="-103.3543">C</text>
</g>
<g class="m-edge">
<title>A&#45;&gt;C</title>
<path d="M43,-161.1839C43,-153.3999 43,-144.1942 43,-135.6079"/>
<polygon points="46.5001,-135.5788 43,-125.5789 39.5001,-135.5789 46.5001,-135.5788"/>
</g>
<g class="m-node m-flat">
<title>D</title>
<ellipse cx="115" cy="-34.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="115" y="-30.5848">D</text>
</g>
<g class="m-edge">
<title>B&#45;&gt;D</title>
<path d="M115,-88.4144C115,-80.6303 115,-71.4246 115,-62.8383"/>
<polygon points="118.5001,-62.8093 115,-52.8093 111.5001,-62.8094 118.5001,-62.8093"/>
</g>
<g class="m-node m-flat">
<title>B2</title>
<ellipse cx="115" cy="-179.9239" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="115" y="-176.1239">B2</text>
</g>
<g class="m-edge">
<title>B2&#45;&gt;B</title>
<path d="M115,-161.1839C115,-153.3999 115,-144.1942 115,-135.6079"/>
<polygon points="118.5001,-135.5788 115,-125.5789 111.5001,-135.5789 118.5001,-135.5788"/>
</g>
</g>
</svg>
</div>
<!-- /content -->
      </div>
    </div>
  </div>
</article>
</main>
</body>
</html>
